+
<style>
    #profile-update {
        padding: 20px 25px 25px 0;
    }
</style>
<div class="layui-fluid" id="food-update">
    <form class="layui-form" action="" lay-filter="food-update-form">

        <div class="layui-form-item febs-hide">
            <label class="layui-form-label febs-form-item-require">id:</label>
            <div class="layui-input-block">
                <input type="text" name="id" minlength="4" maxlength="10"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">菜品类型：</label>
            <div class="layui-input-block">
                <select name="foodtype" lay-filter="foodtype" id="foodtype">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">菜品名称：</label>
            <div class="layui-input-block">
                <input type="text" name="foodtitle" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">菜品价格：</label>
            <div class="layui-input-block">
                <input type="number" name="foodprice" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">菜品规格：</label>
            <div class="layui-input-block">
                <input type="text" name="foodspecification" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">菜品简介：</label>
            <div class="layui-input-block">
                <input type="text" name="foodintroduction" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">菜品主图：</label>
            <div class="layui-input-block">
                <img class="layui-upload-img" id="foodurl" name="foodSrc">
            </div>
        </div>


        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="food-update-form-submit" id="submit"></button>
        </div>
    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['febs', 'form', 'validate'], function () {
        let $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            form = layui.form,
            data = [[${data}]]
        let foodtypeId
        let foodtypeTitle

        form.render();

        initValue();

        function initValue() {
            foodtypeId = data.foodTypeId;
            foodtypeTitle = data.foodTypeTitle
            form.val("food-update-form", {
                "id": data.id,
                "foodtype": data.foodTypeTitle,
                "foodtitle": data.title,
                "foodprice": data.price,
                "foodspecification": data.specification,
                "foodintroduction": data.introduction
            });
            $('#foodurl').attr('src', data.url)
        }

        febs.post(ctx + 'web/get/foodtype', null, function (data) {
            console.log("foodtypeId  ===  " + foodtypeId)

            $.each(data.data, function (index, item) {
                $("#foodtype").append(new Option(item.title, item.id));
            });
            $('#foodtype').find("option[value=" + foodtypeId + "]").attr("selected", true);
            layui.form.render("select");
        });

        form.on('select(foodtype)', function (data) {
            foodtypeId = new Number(data.value)
            foodtypeTitle = this.innerText
        });

        form.on('submit(food-update-form-submit)', function (data) {
            if (!data.field.foodtype) {
                febs.alert.warn('请输入菜品类型');
                return false;
            }
            if (!data.field.foodtitle) {
                febs.alert.warn('请输入菜品名称');
                return false;
            }
            if (!data.field.foodprice) {
                febs.alert.warn('请输入菜品价格');
                return false;
            }
            if (!data.field.foodspecification) {
                febs.alert.warn('请输入菜品规格');
                return false;
            }
            if (!data.field.foodintroduction) {
                febs.alert.warn('请输入菜品介绍');
                return false;
            }
            console.log("foodTypeTitle  ===  " + foodtypeTitle)
            febs.post(ctx + 'web/update/food', {
                id: data.field.id,
                title: data.field.foodtitle,
                price: data.field.foodprice,
                Introduction: data.field.foodintroduction,
                specification: data.field.foodspecification,
                foodTypeId: foodtypeId,
                foodTypeTitle: foodtypeTitle
            }, function (r) {
                console.log(r)
                layer.closeAll();
                window.location.reload();
            })

        })

    });
</script>